import React, {
	Component
} from 'react';

import 'antd/dist/antd.css';
import store from './store';
import TodoListUI from './TodoListUI'

import {
	getInputChangeAction,
	getAddTodoAction,
	getDeleteTodoAction,
	getInitListAction,
	getTodoList
} from './store/ActionCreators';

class TodoListForAnt2 extends Component {

	constructor(props) {
		super(props);
		this.state = store.getState();
		this.handleInputChange = this.handleInputChange.bind(this);
		this.handleBtnClick = this.handleBtnClick.bind(this);
		this.handleItemDelete = this.handleItemDelete.bind(this);
		this.handleStoreChange = this.handleStoreChange.bind(this);
		store.subscribe(this.handleStoreChange);
	}

	render() {
		return (
			<TodoListUI 
				inputValue = {this.state.inputValue}
				list = {this.state.list}
				handleInputChange = {this.handleInputChange}
				handleBtnClick = {this.handleBtnClick}
				handleItemDelete = {this.handleItemDelete}
			/>
		);
	}

	componentDidMount() {
		const action = getTodoList();
		store.dispatch(action);
	}

	handleInputChange(e) {
		const action = getInputChangeAction(e.target.value);
		store.dispatch(action);
	}

	handleBtnClick() {
		const action = getAddTodoAction();
		store.dispatch(action);
	}

	handleItemDelete(index) {
		const action = getDeleteTodoAction(index);
		store.dispatch(action);
	}

	handleStoreChange() {
		this.setState(store.getState());
	}


}

export default TodoListForAnt2;